.app-theme-default:root {
    /* 应用级 Start */
    // 应用底层背景色
    --app-background-color: #f7f7f7;
    --app-background-color-rgb: 247, 247, 247;
    // 应用底默认字体颜色
    --app-font-color: #515a6e;
    --app-font-color-rgb: 81, 90, 110;
    // 滚动条颜色
    --app-scroll-bar-color: #c1c1c1;
    --app-scroll-bar-color-rgb: 193, 193, 193;
    // 分割线颜色
    --app-dividing-line-color: #1e1e1e;
    --app-dividing-line-color-rgb: 30, 30, 30;
    // 分割线颜色(淡色)
    --app-dividing-line-color-tint: #2d2d2d;
    --app-dividing-line-color-tint-rgb: 45, 45, 45;
    // 分割线颜色(亮色)
    --app-dividing-line-color-bright: rgba(135, 135, 135, 0.2);
    --app-dividing-line-color-bright-rgb: 135, 135, 135;
    // 滚动条宽度
    --app-scroll-bar-width: 6;
    /* 应用级 End */

    /* 头部 Start */
    // 背景色
    --app-header-background-color: #1d1e23;
    --app-header-background-color-rgb: 221, 221, 221;
    // 字体颜色
    --app-header-color: #f6ca9d;
    --app-header-color-rgb: 246, 202, 157;
    // 激活色
    --app-header-background-color-active: #1d1e23;
    --app-header-background-color-active-rgb: 221, 221, 221;
    // 激活字体颜色
    --app-header-font-color-active: rgba(var(--app-header-color-rgb), 0.7);
    --app-header-font-color-active-rgb: 246, 202, 157;
    /* 头部 End */

    /* 底部 Start */
    // 背景色
    --app-footer-background-color: #343434;
    --app-footer-background-color-rgb: 52, 52, 52;
    // 字体颜色
    --app-footer-color: #fff;
    --app-footer-color-rgb: 255, 255, 255;
    // 激活色
    --app-footer-background-color-active: #1f8ad2;
    --app-footer-background-color-active-rgb: 31, 138, 210;
    // 激活字体颜色
    --app-footer-font-color-active: #fff;
    --app-footer-font-color-active-rgb: 255, 255, 255;
    /* 底部 End */

    /* 悬浮菜单 Start */
    // 背景色
    --app-suspension-windows-background-color: #fff;
    --app-suspension-windows-background-color-rgb: 255, 255, 255;
    // 字体颜色
    --app-suspension-windows-color: #202124;
    --app-suspension-windows-color-rgb: 134, 134, 134;
    // 激活色
    --app-suspension-windows-background-color-active: #0074e8;
    --app-suspension-windows-background-color-active-rgb: 0, 116, 232;
    // 激活字体颜色
    --app-suspension-windows-font-color-active: #fff;
    --app-suspension-windows-font-color-active-rgb: 255, 255, 255;
    /* 悬浮菜单 End */

    /* 侧边栏 Start */
    // 背景色
    --app-left-sidebar-background-color: #1d1e23;
    --app-left-sidebar-background-color-rgb: 221, 221, 221;
    // 激活背景色
    --app-left-sidebar-background-color-active: rgba(63, 64, 69, 0.75);
    --app-left-sidebar-background-color-active-rgb: 63, 64, 69;
    // 字体颜色
    --app-left-sidebar-font-color: #515a6e;
    --app-left-sidebar-font-color-rgb: 81, 90, 110;
    // 激活字体颜色
    --app-left-sidebar-font-color-active: #fff;
    --app-left-sidebar-font-color-active-rgb: 255, 255, 255;
    /* 侧边栏 End */

    /* 视图 Start */
    // 背景色
    --view-background-color: #fff;
    --view-background-color-rgb: 255, 255, 255;
    // 背景色(淡色)
    --view-background-color-tint: #f7f7f7;
    --view-background-color-tint-rgb: 247, 247, 247;
    // 背景色(亮色)
    --view-background-color-bright: #fff;
    --view-background-color-bright-rgb: 255, 255, 255;
    // 激活背景色
    --view-background-color-active: #2d8cf0;
    --view-background-color-active-rgb: 45, 140, 240;
    // 字体颜色
    --view-font-color: #202124;
    --view-font-color-rgb: 97, 97, 97;
    // 字体颜色(淡色)
    --view-font-color-tint: #202124;
    --view-font-color-tint-rgb: 97, 97, 97;
    // 字体颜色(亮色)
    --view-font-color-bright: #616161;
    --view-font-color-bright-rgb: 97, 97, 97;
    // 激活字体颜色
    --view-font-color-active: #fff;
    --view-font-color-active-rgb: 255, 255, 255;
    // 背景悬浮色
    --view-background-color-hover: #e8e8e8;
    --view-background-color-hover-rgb: 232, 232, 232;
    // 悬浮字体颜色
    --view-font-color-hover: #202124;
    --view-font-color-hover-rgb: 97, 97, 97;
    // 按钮背景色
    --view-button-background-color: #202124;
    --view-button-background-color-rgb: 224, 224, 224;
    // 按钮字体颜色
    --view-button-color: #fff;
    --view-button-color-rgb: 255, 255, 255;
    // 激活按钮背景色
    --view-button-background-color-active: #2ab8ea;
    --view-button-background-color-active-rgb: 0, 116, 232;
    // 激活按钮字体颜色
    --view-button-color-active: #fff;
    --view-button-color-active-rgb: 255, 255, 255;
    // 禁用按钮背景色
    --view-button-background-color-disabled: #c1bcbc;
    --view-button-background-color-disabled-rgb: 193, 188, 188;
    // 禁用按钮字体颜色
    --view-button-color-disabled: #fff;
    --view-button-color-disabled-rgb: 255, 255, 255;
    // 分割线颜色
    --view-dividing-line-color: #1e1e1e;
    --view-dividing-line-color-rgb: 30, 30, 30;
    // 分割线颜色(淡色)
    --view-dividing-line-color-tint: #f3f3f3;
    --view-dividing-line-color-tint-rgb: 243, 243, 243;
    // 分割线颜色(亮色)
    --view-dividing-line-color-bright: #878787;
    --view-dividing-line-color-bright-rgb: 135, 135, 135;
    /* 视图 End */

    // 表单 Start */
    // label标签字体颜色
    --form-label-font-color: #fff;
    --form-label-font-color-rgb: 255, 255, 255;
    // 编辑器字体颜色
    --form-editor-font-color: #202124;
    --form-editor-font-color-rgb: 32, 33, 36;
    // 编辑器placeholder字体颜色
    --form-editor-placeholder-font-color: #9e9e9e;
    --form-editor-placeholder-font-color-rgb: 204, 204, 204;
    // 编辑器背景色
    --form-editor-background-color: #fff;
    --form-editor-background-color-rgb: 255, 255, 255;
    // 编辑器边框色
    --form-editor-border-color: #cecece;
    --form-editor-border-color-rgb: 206, 206, 206;
    // 禁用编辑器字体颜色
    --form-disable-editor-font-color: rgba(32, 33, 36, 0.5);
    --form-disable-editor-font-color-rgb: 32, 33, 36;
    // 禁用编辑器背景色
    --form-disable-editor-background-color: #ccc;
    --form-disable-editor-background-color-rgb: 86, 85, 85;
    // 编辑器激活颜色
    --form-editor-active-color: #f6ca9d;
    --form-editor-active-color-rgb: 246, 202, 157;
    // 编辑器下拉区背景色
    --form-editor-dropdown-background-color: #fff;
    --form-editor-dropdown-background-color-rgb: 255, 255, 255;
    /* 表单 End */

    /*代码表颜色转换 Start*/
    // 红色
    --codelist-red-color: #ed4014;
    // 绿色
    --codelist-darkgreen-color: #19be6b;
    // 蓝色
    --codelist-blue-color: #2d8cf0;
    /*代码表颜色转换 End*/

    /* 表格 Start */
    // 分页字体颜色
    --grid-page-font-color: #e8e8e8;
    /* 表格 End */

    // 默认字体
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, '\5FAE\8F6F\96C5\9ED1',
        Arial, sans-serif;

    .app-content-lef-nav-menu {
        border-right: 1px solid var(--app-dividing-line-color-bright);
        background-color: var(--app-left-sidebar-background-color);

        .el-menu {
            background-color: var(--app-left-sidebar-background-color);

            .el-menu-item,
            .el-submenu > .el-submenu__title {
                color: hsla(0, 0%, 100%, 0.7);

                > i {
                    color: hsla(0, 0%, 100%, 0.7);
                }
            }

            .el-menu-item:hover,
            .el-menu-item.is-active,
            .el-submenu > .el-submenu__title:hover {
                color: var(--app-left-sidebar-font-color-active);
                background-color: var(--app-left-sidebar-background-color-active);

                > i {
                    color: var(--app-left-sidebar-font-color-active);
                }
            }
        }

        .el-menu.el-menu--collapse {
            > .el-menu-item.is-active > .el-tooltip {
                > i {
                    color: var(--app-left-sidebar-font-color-active);
                }
            }
        }
    }

    .grid {
        .page-column,
        .batch-toolbar {
            --view-button-background-color: #2d8cf0;
            --view-button-background-color-rgb: 45, 140, 240;
            --view-button-background-color-active: #67abf1;
            --view-button-background-color-active-rgb: 103, 171, 241;
        }

        .pull-right.ivu-page {
            .ivu-select-item:hover,
            .ivu-select-item.ivu-select-item-selected {
                color: var(--view-button-color);
                background-color: var(--view-button-background-color);
            }
        }
    }

    .ivu-poptip-popper.ivu-poptip-transfer.grid-column {
        .el-checkbox.is-checked {
            .el-checkbox__inner {
                background-color: var(--view-button-background-color) !important;
            }

            .el-checkbox__label {
                color: var(--view-button-background-color);
            }
        }
    }
}
